<template>
	<div>
		<el-tree
			ref='tree'
			:props="treeProps"
			:data='options'
			node-key='id'
			show-checkbox
			:default-checked-keys='defaultCheckedKeys'
			@check-change="emitValues">
		</el-tree>
	</div>
</template>

<script>
	export default {
		props :{
            value : {
                type : Array,
                default : _ => []
            },
			code : {
				type : String
			},
			//配置项
			treeProps :{
				type : Object,
				default : _ => {
					return {
						value : 'id',
						label : 'title',
						multiple : false,//是否可多选
					}
				}
			},
			//默认选中
			defaultCheckedKeys :{
				type : Array,
				default : _ => []
			}
		},
		data () {
			return {
				apiMap :{
					allMenus : this.__api.system.getMenu
				},
				options : [],
				values : []
			}
		},
		created () {
			//根据code获取options
			if (!this.code) return;

			let promise = this.apiMap[this.code];
			promise().then(res => {
				this.options = res
			})
		},
		methods: {
			emitValues () {
				let values = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
                this.$emit('input', values);
				//这里多往外暴露一份只有选中节点的数据，用来在编辑的时候使用
				this.$emit('change', {
					serviceData : values,
					webData : this.$refs.tree.getCheckedKeys(true)
				})
			}
		}
	}
</script>

<style>
</style>
